<template>
    <div class="weather" :style="{ backgroundImage: `url(${currentWeatherIcon})` }">
        <div class="current-weather">
            <h3>当前天气</h3>
            <img :src="currentWeatherIcon" alt="Current Weather" />
            <p>{{ currentTemperature }}°C</p>
        </div>
        <div class="forecast">
            <h3>未来6天天气预报</h3>
            <ul>
                <li v-for="(forecast, index) in weatherForecast" :key="index">
                    <span>{{ forecast.date }}</span>
                    <img :src="forecast.icon" alt="Weather Icon" />
                    <span>{{ forecast.temperature }}°C</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        currentWeatherIcon: {
            type: String,
            required: true
        },
        currentTemperature: {
            type: String,
            required: true
        },
        weatherForecast: {
            type: Array,
            required: true
        }
    }
};
</script>

<style scoped>
.weather {
    flex: 1;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background-size: cover;
    background-position: center;
    color: #fff;
}

.current-weather {
    text-align: center;
    margin-bottom: 20px;
}

.current-weather img {
    width: 50px;
    height: 50px;
}

.forecast {
    text-align: center;
}

.forecast ul {
    list-style: none;
    padding: 0;
}

.forecast li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.forecast li img {
    width: 30px;
    height: 30px;
}
</style>